<!-- 雷达图 -->
<template>
  <el-card>
    <template #header>订单状态雷达图</template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted, onActivated, markRaw } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: 'radarChart',
  },
  className: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '200px',
    required: true,
  },
  height: {
    type: String,
    default: '200px',
    required: true,
  },
})

const options = {
  grid: {
    left: '2%',
    right: '2%',
    bottom: '10%',
    containLabel: true,
  },
  legend: {
    x: 'center',
    y: 'bottom',
    data: ['预定数量', '下单数量', '发货数量'],
    textStyle: {
      color: '#999',
    },
  },
  radar: {
    // shape: 'circle',
    radius: '60%',
    indicator: [
      { name: '家用电器' },
      { name: '服装箱包' },
      { name: '运动户外' },
      { name: '手机数码' },
      { name: '汽车用品' },
      { name: '家具厨具' },
    ],
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      itemStyle: {
        borderRadius: 6,
        color: function (params: any) {
          //自定义颜色
          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
          return colorList[params.dataIndex]
        },
      },
      data: [
        {
          value: [400, 400, 400, 400, 400, 400],
          name: '预定数量',
        },
        {
          value: [300, 300, 300, 300, 300, 300],
          name: '下单数量',
        },
        {
          value: [200, 200, 200, 200, 200, 200],
          name: '发货数量',
        },
      ],
    },
  ],
}

const chart = ref<any>('')

onMounted(() => {
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement),
  )

  chart.value.setOption(options)

  window.addEventListener('resize', () => {
    chart.value.resize()
  })
})

onActivated(() => {
  if (chart.value) {
    chart.value.resize()
  }
})
</script>
